import PropTypes from 'prop-types';
import { useContext } from 'react';
import { OnboardingContext } from '../context/context';
import Notice from './notice';
import FooterButtons from './layout/footer-buttons';
import './theme-selection-experiment202-variant-b.scss';

const getFeatureData = () => [
	{
		icon: (
			<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path fillRule="evenodd" clipRule="evenodd" d="M7.29183 6.927C7.09048 6.927 6.92725 7.09023 6.92725 7.29159V10.5728H28.0731V7.29159C28.0731 7.09023 27.9098 6.927 27.7085 6.927H7.29183ZM30.2606 7.29159C30.2606 5.88211 29.118 4.7395 27.7085 4.7395H7.29183C5.88235 4.7395 4.73975 5.88211 4.73975 7.29159V27.7083C4.73975 29.1177 5.88235 30.2603 7.29183 30.2603H27.7085C29.118 30.2603 30.2606 29.1177 30.2606 27.7083V7.29159ZM28.0731 12.7603H6.92725V27.7083C6.92725 27.9096 7.09048 28.0728 7.29183 28.0728H27.7085C27.9098 28.0728 28.0731 27.9096 28.0731 27.7083V12.7603Z" fill="#0C0D0E" />
			</svg>
		),
		title: __( 'Header and footer templates', 'elementor' ),
		description: __( 'Build a branded look with ready-to-use headers and footers', 'elementor' ),
	},
	{
		icon: (
			<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path fillRule="evenodd" clipRule="evenodd" d="M5.48699 5.48699C5.9656 5.00838 6.61473 4.7395 7.29159 4.7395H13.1249C13.8018 4.7395 14.4509 5.00838 14.9295 5.48699C15.4081 5.9656 15.677 6.61473 15.677 7.29159V13.1249C15.677 13.8018 15.4081 14.4509 14.9295 14.9295C14.4509 15.4081 13.8018 15.677 13.1249 15.677H7.29159C6.61473 15.677 5.9656 15.4081 5.48699 14.9295C5.00838 14.4509 4.7395 13.8018 4.7395 13.1249V7.29159C4.7395 6.61473 5.00838 5.9656 5.48699 5.48699ZM7.29159 6.927C7.19489 6.927 7.10216 6.96541 7.03379 7.03379C6.96541 7.10216 6.927 7.19489 6.927 7.29159V13.1249C6.927 13.2216 6.96541 13.3143 7.03379 13.3827C7.10216 13.4511 7.19489 13.4895 7.29159 13.4895H13.1249C13.2216 13.4895 13.3143 13.4511 13.3827 13.3827C13.4511 13.3143 13.4895 13.2216 13.4895 13.1249V7.29159C13.4895 7.19489 13.4511 7.10216 13.3827 7.03379C13.3143 6.96541 13.2216 6.927 13.1249 6.927H7.29159Z" fill="#0C0D0E" />
				<path fillRule="evenodd" clipRule="evenodd" d="M5.48699 20.0703C5.9656 19.5917 6.61473 19.3228 7.29159 19.3228H13.1249C13.8018 19.3228 14.4509 19.5917 14.9295 20.0703C15.4081 20.5489 15.677 21.1981 15.677 21.8749V27.7083C15.677 28.3851 15.4081 29.0342 14.9295 29.5128C14.4509 29.9915 13.8018 30.2603 13.1249 30.2603H7.29159C6.61473 30.2603 5.9656 29.9915 5.48699 29.5128C5.00838 29.0342 4.7395 28.3851 4.7395 27.7083V21.8749C4.7395 21.1981 5.00838 20.5489 5.48699 20.0703ZM7.29159 21.5103C7.19489 21.5103 7.10216 21.5487 7.03379 21.6171C6.96541 21.6855 6.927 21.7782 6.927 21.8749V27.7083C6.927 27.8049 6.96541 27.8977 7.03379 27.9661C7.10216 28.0344 7.19489 28.0728 7.29159 28.0728H13.1249C13.2216 28.0728 13.3143 28.0344 13.3827 27.9661C13.4511 27.8977 13.4895 27.8049 13.4895 27.7083V21.8749C13.4895 21.7782 13.4511 21.6855 13.3827 21.6171C13.3143 21.5487 13.2216 21.5103 13.1249 21.5103H7.29159Z" fill="#0C0D0E" />
				<path fillRule="evenodd" clipRule="evenodd" d="M21.8749 19.3228C21.1981 19.3228 20.5489 19.5917 20.0703 20.0703C19.5917 20.5489 19.3228 21.1981 19.3228 21.8749V27.7083C19.3228 28.3851 19.5917 29.0342 20.0703 29.5128C20.5489 29.9915 21.1981 30.2603 21.8749 30.2603H27.7083C28.3851 30.2603 29.0342 29.9915 29.5128 29.5128C29.9915 29.0342 30.2603 28.3851 30.2603 27.7083V21.8749C30.2603 21.1981 29.9915 20.5489 29.5128 20.0703C29.0342 19.5917 28.3851 19.3228 27.7083 19.3228H21.8749ZM21.6171 21.6171C21.6855 21.5487 21.7782 21.5103 21.8749 21.5103H27.7083C27.8049 21.5103 27.8977 21.5487 27.9661 21.6171C28.0344 21.6855 28.0728 21.7782 28.0728 21.8749V27.7083C28.0728 27.8049 28.0344 27.8977 27.9661 27.9661C27.8977 28.0344 27.8049 28.0728 27.7083 28.0728H21.8749C21.7782 28.0728 21.6855 28.0344 21.6171 27.9661C21.5487 27.8977 21.5103 27.8049 21.5103 27.7083V21.8749C21.5103 21.7782 21.5487 21.6855 21.6171 21.6171Z" fill="#0C0D0E" />
				<path d="M19.3228 10.2083C19.3228 9.60419 19.8125 9.1145 20.4166 9.1145H23.6978V5.83325C23.6978 5.22919 24.1875 4.7395 24.7916 4.7395C25.3956 4.7395 25.8853 5.22919 25.8853 5.83325V9.1145H29.1666C29.7706 9.1145 30.2603 9.60419 30.2603 10.2083C30.2603 10.8123 29.7706 11.302 29.1666 11.302H25.8853V14.5833C25.8853 15.1873 25.3956 15.677 24.7916 15.677C24.1875 15.677 23.6978 15.1873 23.6978 14.5833V11.302H20.4166C19.8125 11.302 19.3228 10.8123 19.3228 10.2083Z" fill="#0C0D0E" />
			</svg>
		),
		title: __( 'Business-focused widgets', 'elementor' ),
		description: __( 'Add contact forms, CTAs, and hero sections with one click', 'elementor' ),
	},
	{
		icon: (
			<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
				<path fillRule="evenodd" clipRule="evenodd" d="M24.7321 4.74112C24.752 4.74004 24.7718 4.7395 24.7917 4.7395C26.2421 4.7395 27.6331 5.31567 28.6587 6.34126C29.6843 7.36685 30.2604 8.75785 30.2604 10.2083C30.2604 10.2281 30.2599 10.248 30.2588 10.2678C30.1057 13.0757 29.1234 15.7752 27.4361 18.0249C25.8943 20.0808 23.8269 21.6766 21.4577 22.6485C21.3043 24.0613 20.8465 25.4271 20.1124 26.6507C19.2512 28.0861 18.0381 29.2781 16.588 30.1141C16.2695 30.2978 15.8801 30.3091 15.5514 30.1443C15.2228 29.9795 14.999 29.6607 14.9556 29.2957C14.8595 28.4875 14.6712 27.6984 14.3975 26.9428C13.5552 27.9131 12.5267 28.7141 11.366 29.2944C9.61219 30.1713 7.63644 30.5045 5.69204 30.2512C5.20007 30.1871 4.81286 29.7999 4.74876 29.3079C4.49544 27.3635 4.82859 25.3877 5.7055 23.6339C6.28584 22.4732 7.08683 21.4448 8.05717 20.6025C7.3015 20.3287 6.51246 20.1404 5.70427 20.0444C5.33922 20.001 5.02038 19.7771 4.85561 19.4485C4.69084 19.1199 4.70218 18.7305 4.88578 18.412C5.72183 16.9618 6.91388 15.7488 8.34925 14.8875C9.57278 14.1534 10.9387 13.6956 12.3514 13.5422C13.3233 11.173 14.9191 9.10567 16.975 7.56379C19.2247 5.87652 21.9242 4.89422 24.7321 4.74112ZM10.2315 21.687C9.1401 22.4224 8.25367 23.429 7.66206 24.6122C7.1121 25.7121 6.83712 26.9243 6.85454 28.1454C8.07565 28.1628 9.28781 27.8878 10.3877 27.3379C11.571 26.7463 12.5775 25.8598 13.313 24.7684C12.9154 24.1587 12.4536 23.5881 11.9327 23.0672C11.4118 22.5463 10.8412 22.0845 10.2315 21.687ZM24.82 6.92712C22.4553 7.06223 20.1827 7.89235 18.2875 9.31379C16.3839 10.7415 14.9464 12.7016 14.1568 14.9462C14.0071 15.3716 13.6118 15.6615 13.1611 15.6764C11.8599 15.7194 10.5911 16.0935 9.47471 16.7633C8.81933 17.1565 8.22917 17.6441 7.72196 18.2078C9.88971 18.7817 11.879 19.9199 13.4795 21.5204C15.08 23.1209 16.2182 25.1102 16.7921 27.278C17.3559 26.7708 17.8434 26.1806 18.2366 25.5252C18.9065 24.4088 19.2806 23.14 19.3235 21.8388C19.3384 21.3881 19.6283 20.9928 20.0537 20.8431C22.2984 20.0535 24.2585 18.616 25.6861 16.7124C27.1076 14.8172 27.9377 12.5447 28.0728 10.1799C28.0654 9.31992 27.7205 8.49674 27.1119 7.88806C26.5032 7.27938 25.68 6.93453 24.82 6.92712ZM20.0704 11.3203C20.549 10.8417 21.1982 10.5728 21.875 10.5728C22.5519 10.5728 23.201 10.8417 23.6796 11.3203C24.1582 11.7989 24.4271 12.4481 24.4271 13.1249C24.4271 13.8018 24.1582 14.4509 23.6796 14.9295C23.201 15.4081 22.5519 15.677 21.875 15.677C21.1982 15.677 20.549 15.4081 20.0704 14.9295C19.5918 14.4509 19.3229 13.8018 19.3229 13.1249C19.3229 12.4481 19.5918 11.7989 20.0704 11.3203ZM21.875 12.7603C21.7783 12.7603 21.6856 12.7987 21.6172 12.8671C21.5488 12.9355 21.5104 13.0282 21.5104 13.1249C21.5104 13.2216 21.5488 13.3143 21.6172 13.3827C21.6856 13.4511 21.7783 13.4895 21.875 13.4895C21.9717 13.4895 22.0644 13.4511 22.1328 13.3827C22.2012 13.3143 22.2396 13.2216 22.2396 13.1249C22.2396 13.0282 22.2012 12.9355 22.1328 12.8671C22.0644 12.7987 21.9717 12.7603 21.875 12.7603Z" fill="#0C0D0E" />
			</svg>
		),
		title: __( 'Optimized performance', 'elementor' ),
		description: __( 'Loads fast and looks great on any device', 'elementor' ),
	},
];

export default function ThemeSelectionExperiment202VariantB( { actionButton, skipButton, noticeState } ) {
	const { state } = useContext( OnboardingContext );
	const features = getFeatureData();

	const printNotices = () => {
		return (
			<>
				{ noticeState && <Notice noticeState={ noticeState } /> }
				{ state.proNotice && <Notice noticeState={ state.proNotice } /> }
			</>
		);
	};

	return (
		<>
			<div className="e-onboarding__page-content e-onboarding__page-content--experiment-202">
				<div className="e-onboarding__page-content-header">
					<h1 className="e-onboarding__page-content-title">
						{ __( 'Start with Hello Biz', 'elementor' ) }
					</h1>
					<p className="e-onboarding__page-content-subtitle">
						{ __( 'Some of the features you get with Hello Biz theme:', 'elementor' ) }
					</p>
				</div>

				<div className="e-onboarding__features-grid">
					{ features.map( ( feature, index ) => (
						<div key={ index } className="e-onboarding__feature-item">
							<div className="e-onboarding__feature-icon">
								{ feature.icon }
							</div>
							<div className="e-onboarding__feature-content">
								<h3 className="e-onboarding__feature-title">
									{ feature.title }
								</h3>
								<p className="e-onboarding__feature-description">
									{ feature.description }
								</p>
							</div>
						</div>
					) ) }
				</div>
			</div>

			{ noticeState &&
				<div className="e-onboarding__notice-container">
					{ noticeState || state.proNotice
						? printNotices()
						: <div className="e-onboarding__notice-empty-spacer" /> }
				</div>
			}
			<FooterButtons actionButton={ actionButton } skipButton={ skipButton } />
		</>
	);
}

ThemeSelectionExperiment202VariantB.propTypes = {
	actionButton: PropTypes.object.isRequired,
	skipButton: PropTypes.object.isRequired,
	noticeState: PropTypes.object,
};
